<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Trajectory demo</title>
        <!-- we include JcanvaScript library here -->
        <script type="text/javascript" src="jCanvaScript.js"> </script>
        <script type="text/javascript">
			//Add a listener for load event to window. The purpose is to execute JavaScript code only when the page is fully loaded (so the canvas element is accessible).
			window.addEventListener("load", main, false);
			
			function main() { //main wrapper function: all code must be within this function
				
				var canvas = jc.canvas('canvas_1').start(true);
				
				var points = new Array(); //the array where X,Y coordinates are stored
    
				/* MIDPOINT PARAMETERS */
				noS = 639; //set the number of final segments
				mD = 180; //the maximum displacement of Y coordinate
				minY = 240 //minimum value of Y coordinate
				maxY = 440 //maximum value of Y coordinate
				points[1] = [0, Math.random() * (maxY - minY) + minY]; //any random number between minY and maxY
				points[noS+1] = [noS+1, Math.random() * (maxY - minY) + minY]; //any random number between minY and maxY
				 
				reduction = 0.4; //the amount to which mD is reduced at each iteration (it should be between 0 and 1)
				
				/* MIDPOINT DISPLACEMENT FUNCTION */
			
				function midpoint(start, end, mD, reduction) {
					var middle = Math.round((start + end) / 2);
					if ((end - start <= 1) || middle == start || middle == end) {
						return;
					}
					
					/* this is a good example of when do while loop is useful
					the loop avoids to have Y values out of the 40-340 range */
					
					do {
						var nY = (points[end][1] + points[start][1]) / 2 + mD * (1 - 2 * Math.random());
					} while (nY<minY || nY>maxY)
					points[middle] = [middle, nY];
					midpoint(start, middle, mD * reduction, reduction);
					midpoint(middle, end, mD * reduction, reduction);
				}
			
				/* CANVAS */
			
				function drawTerrain() {
					x = 0;
					y = 480
					
					points[0]=[0,480];
					points[noS+2]=[640,480];
			
					jc.line(points,'#009900',1);

				}
			
				midpoint(1, noS+1, mD, reduction); //call to midpoint displacement function
				drawTerrain(); //call to draw terrain function
				
				// ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## 
				
				var pro = {
					x:60, //start pos x
					y:0, //start pos y
					r:10, //radius
					v:70, //init velocity
					a: 60 //angle
				};
				
				pro.y = (points[pro.x][1]-pro.r);
				
				jc.circle(pro.x,pro.y,pro.r,'#ff0000', true).id('p');
				
				jc('#p').click(
					function(){
						fire('#p', pro, 1);
					}
				);
				
				// ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ##
				
				var pro2 = {
					x:580, //start pos x
					y:0, //start pos y
					r:10, //radius
					v:70, //init velocity
					a: 60 //angle
				};
				
				pro2.y = (points[pro2.x][1]-pro2.r);
				
				jc.circle(pro2.x,pro2.y,pro2.r,'#0000ff', true).id('p2');
				
				jc('#p2').click(
					function(){
						fire('#p2', pro2, -1);
					}
				);
				
				
				// ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## 
				
				function fire(id,p,lr) { //lr indicates the direction of the shoot
					var G = 9.8; //gravity
					var W = 0; //wind
					var t = 0;
					var v0x = p.v * Math.cos(p.a * Math.PI/180); //initial horizontal velocity
					var v0y = p.v * Math.sin(p.a * Math.PI/180); //initial vertical velocity
					var startX = p.x;
					var startY = p.y;
					var loop = setInterval(function() {
						if ((p.y < points[p.x][1]) && ((p.x  < 640)&&(p.x  > 0))) {
							p.y = Math.round(startY - ( v0y * t - (1/2 * G * Math.pow(t,2)) ));
							p.x = Math.round(startX + (v0x * lr + W) * t);
							t+=.1; // 100 msec (virtual time)
							jc(id).translateTo(p.x,p.y);
						}
						else {clearInterval(loop); alert('KABOOM!!!');} //callback function
					}, 10); //10 msec
				}
				
				// ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## 
				
			}
        </script>
    </head>
    
    <body>
        <div>
            <canvas id="canvas_1" width="640" height="480" style="border: 1px solid black">
                Your browser does not support HTML5 Canvas.
            </canvas>
        </div>
    </body>
</html>
​
​
